<!-- 兑换 -->
<template>
  <div class="exchange navTop">
      <van-nav-bar
      title="兑换"
      left-arrow
	  fixed
      class="loginNav"
      @click-left="onClickLeft"
    />

    <div class="p25 hl">
        <p>当前汇率：1积分=0.1DDM</p>
    </div>
    <div class="p25 zhonglei">
        <h2>兑换种类</h2>
        <div class="duihuan">
            <span>
                <img src="@/static/icon/jf3.png" alt="">
                积分
            </span>
            <img src="@/static/icon/dh2.png" class="h">
            <span>
                <img src="@/static/icon/dd1.png" alt="">
                DDM
            </span>
        </div>
    </div>
    <div class="p25 shuliang">
        <h2>兑换数量</h2>
        <div>
            <input type="number" placeholder="请输入兑换数量">
            <span>全部</span>
        </div>
        <p>最多可兑5154.5</p>
    </div>
    <div class="btnBox">
        <button class="primary" @click="login">提交</button>
    </div>

    <div class="jilv">
        <h2>兑换记录</h2>
       <ul>
           <li>
               <div class="left">
                   <span>积分兑换DDM</span>
                   <p>2018/11/25  13:24</p>
               </div>
               <div class="right">
                   <span class="blue">-1000.00积分</span>
               </div>
           </li>
           <li>
               <div class="left">
                   <span>积分兑换DDM</span>
                   <p>2018/11/25  13:24</p>
               </div>
               <div class="right">
                   <span class="orange">+1000.00积分</span>
               </div>
           </li>
       </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },
  components: {},
  computed: {},
  mounted(){},
  methods: {
    onClickLeft() {
      uni.navigateBack();
    },
  }
}

</script>
<style lang='less' scoped>
.p25{
    padding: 0 25upx;
    box-sizing: border-box;
    width: 100%;
    h2{
        font-size: 30upx;
        color: #000;
        line-height: 60upx;
        font-weight: bold;
    }
}

.hl{
    p{line-height: 88upx;border-bottom: 1upx solid #F0F0F0;color: #5D5D5D;font-size: 26upx}
}

.zhonglei{
    .duihuan{
        text-align: center;
        border-bottom: 1upx solid #F0F0F0;
        padding-bottom: 35upx;
        margin-top: 10upx;
        span{
            width: 220upx;
            height: 66upx;
            border-radius: 66upx;
            border: 2upx solid #5D5D5D;
            display: inline-block;
            box-sizing:border-box;
            line-height: 66upx;
            font-size: 28upx;
            color: #000;
            img{margin:0 5upx;}
        }
        img{
            width: 46upx;
            height: 46upx;
            vertical-align: middle;
        }
        .h{margin:0 60upx;}
    }
}

.shuliang{
    >div{
        position: relative;
        input{
             border-bottom: 1upx solid #F0F0F0;
             height: 60upx;
        }
        span{
            position: absolute;
            right: 0;
            line-height: 60upx;
            top:0;
            color: #7791E8;
            font-size: 26upx
        }
    }
    p{
        color: #A6A6A6;
        font-size: 20upx;
        line-height: 40upx;
    }
}

.jilv{
    margin-top: 50upx;
    h2{
        padding-left: 25upx;
        font-size: 30upx;
        color: #000;
        line-height: 60upx;
        font-weight: bold;
        border-bottom: 1upx solid #F0F0F0;
    }
    ul{
        padding: 0 25upx;
    }
    li{
        width: 100%;
        display: inline-block;
        line-height: 88upx;
        border-bottom: 1upx solid #F0F0F0;
        .left{
            float: left;
            line-height: 30upx;
            padding-top: 15upx;
            span{font-size: 24upx;font-weight: bold;color: #767676;}
            p{font-size: 20upx;font-weight: bold;color: #B8B8B8;}
        }
        .right{
            float: right;
            line-height: 88upx;
        }
    }
}
</style>